<template>
  <div style="margin: 10px;">
    <!-- 搜索表单 -->
    <form>
      <div class="form-group row">
        <div class="col-md-3">
          <label class="col-form-label" for="projectName">项目名称:</label>
          <input id="projectName" placeholder="请输入项目名称" type="text">
        </div>
        <div class="col-md-3">
          <label class="col-form-label" for="projectName">项目类型:</label>
          <input id="projectName" placeholder="请输入项目类型" type="text">
        </div>
        <div class="col-md-3">
          <label class="col-form-label" for="projectName">构建类型:</label>
          <input id="projectName" placeholder="请输入项目类型" type="text">
        </div>
        <div class="col-md-3">
          <label class="col-form-label" for="projectName">是否生效:</label>
          <input id="projectName" placeholder="请输入项目类型" type="text">
        </div>
      </div>
      <div class="text-left">
        <button class="btn btn-primary" type="button">新增</button>
        <button class="btn btn-primary" type="button">查询</button>
      </div>
    </form>
    <!-- 内容展示 -->
    <table class="table table-hover">
      <thead>
      <tr>
        <th scope="col" v-for='(value, key) in header'>{{value}}</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for='rowItem in history'>
        <td v-for='(value, key) in rowItem'>{{value}}</td>
        <td>
          <button class="btn btn-primary" type="button">删除</button>
          <button class="btn btn-primary" type="button">修改</button>
        </td>
      </tr>
      </tbody>
    </table>
    <!--分页组件-->
    <ul class="pagination">
      <li class="page-item disabled">
        <a class="page-link" href="#" tabindex="-1">Previous</a>
      </li>
      <li class="page-item">
        <a class="page-link" href="#">1</a>
      </li>
      <li aria-current="page" class="page-item active">
        <a class="page-link" href="#">2</a>
      </li>
      <li class="page-item">
        <a class="page-link" href="#">3</a>
      </li>
      <li class="page-item">
        <a class="page-link" href="#">Next</a>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: 'ProjectBaseConfig',
    data: function () {
      return {
        'header': {
          'index': '序号',
          'projectName': '项目名称',
          'projectDesc': '项目描述',
          'projectType': '项目类型',
          'codeLanguage': '开发语言',
          'buildType': '构建类型',
          'deployType': '部署类型',
          'enableFlag': '是否生效',
          'operation': '操作'
        },
        'history': [{
          'index': 0,
          'projectName': '发版系统',
          'projectDesc': '一站式项目发布系统',
          'projectType': '后端',
          'codeLanguage': 'Java',
          'buildType': 'maven',
          'deployType': 'Docker Swarm',
          'enableFlag': true
        },
          {
            'index': 1,
            'projectName': '奖品系统',
            'projectDesc': '奖品抽奖及发放系统',
            'projectType': '后端',
            'codeLanguage': 'Java',
            'buildType': 'maven',
            'deployType': 'Docker Swarm',
            'enableFlag': true
          },
          {
            'index': 2,
            'projectName': '物流系统',
            'projectDesc': '物流管理系统',
            'projectType': '前端',
            'codeLanguage': 'Java',
            'buildType': 'maven',
            'deployType': 'Docker Swarm',
            'enableFlag': true
          }]
      }
    }
  }
</script>

<style scoped>

</style>
